<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-row>
      <el-col :span="18">
        <el-form-item label="用户名:">
          <el-input v-model="form.username" placeholder="用户名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Query</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-button style="float: right" @click="useradd">添加</el-button>
      </el-col>
    </el-row>

  </el-form>

  <!--  <el-divider/>-->
  <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
    <el-table-column type="selection" width="30"/>
    <el-table-column align="center" prop="username" label="名称" width="180"/>
    <el-table-column align="center" prop="roleNames" label="角色" width="180" :formatter="formatRoleName">
      <template #default="scope">
        <el-tag class="el-tag" @click="roleDetail(item.id)"
                v-for="(item) in scope.row.roleList" type="primary">{{ item.name }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="createTime" label="创建时间" width="180"/>
    <el-table-column align="center" prop="updateTime" label="修改时间" width="180"/>
    <el-table-column align="center" prop="lastOperationTime" label="最后操作时间" width="180"/>
    <el-table-column align="center" prop="enabled" label="可用" width="180">
      <template #default="scope">
        <el-switch v-model="scope.row.enabled" @click-wait="1000" @change="changeEnabled(scope.row)"/>
      </template>
    </el-table-column>
    <el-table-column align="center" fixed="right" label="操作" min-width="120">
      <template v-slot="scope">
        <el-button link type="primary" size="small" @click="editUser(scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="delUser(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination class="paginationClass"
                 v-model:current-page="form.page"
                 v-model:page-size="form.pageSize"
                 @change="loadData(form)"
                 :page-sizes="[10, 50, 100,200]"
                 size="small"
                 :background=true
                 layout="total, prev, pager, next, jumper"
                 :total="form.total"
  />

  <el-dialog
      v-model="delDialog"
      title="警告"
      width="500"
      :visible="delDialog">
    <span>注意：删除后不可恢复，请谨慎操作！</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="delDialog = false">取消</el-button>
        <el-button type="primary" @click="delDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-drawer
      v-model="editDrawer">
    <template #header>
      <h4>{{ editForm.title }}</h4>
    </template>
    <el-form :model="editForm" label-width="auto" style="max-width: 600px"
             v-if="editForm.title==='修改用户' || editForm.title=='添加用户'">
      <el-form-item label="用户名">
        <el-input v-model="editForm.username"/>
      </el-form-item>
      <el-form-item label="角色">
        <el-select
            v-model="value1"
            multiple
            placeholder="Select"
            style="width: 240px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="最后登录时间" v-if="editForm.title==='修改用户'">
        <el-text v-model="editForm.lastOperationTime">{{ editForm.lastOperationTime }}</el-text>
      </el-form-item>
      <el-form-item label="最后登录时间" v-if="editForm.title==='修改用户'">
        <el-text v-model="editForm.lastOperationTime">{{ editForm.updateTime }}</el-text>
      </el-form-item>
    </el-form>
    <el-form v-else>
      <el-tree
          style="max-width: 600px"
          :data="permissonData"
          :props="perrmissonProps"
          @node-click="handleNodeClick"
      />
    </el-form>
  </el-drawer>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue'
import {userList, rolePermissionList, userUpdate} from '@/api/acl'

let tableData = []
const delDialog = ref(false)
const editDrawer = ref(false)

onMounted(() => {
  loadData(form)
})
const useradd = () => {
  editForm.title = '添加用户'
  editDrawer.value = true
}
const form = reactive({
  username: '',
  page: 1,
  pageSize: 1,
  total: 0,
})

const changeEnabled = async (row: any) => {
  await userUpdate({
    id: row.id,
    enabled: row.enabled
  })
}
const onSubmit = () => {
  loadData(form)
}

const loading = ref(true)
const loadData = async (params: any) => {
  loading.value = true
  tableData = []
  let resData = await userList(params)
  tableData = resData.data.records
  form.total = resData.data.total
  form.page = resData.data.current
  form.pageSize = resData.data.size
  loading.value = false
}

const formatRoleName = (row: any, column: any) => {
  console.log(row)
  console.log(column)
  return row.roleList.map(item => item.name).join(',')
}


const delUser = (row: any) => {
  delDialog.value = true
  console.log(row.id)
}

const editForm = reactive({
  title: '修改用户',
  username: '',
  roleList: [],
  lastOperationTime: '',
  updateTime: ''
})

const editUser = (row: any) => {
  editForm.title = '修改用户'
  editDrawer.value = true
  editForm.username = row.username
  editForm.lastOperationTime = row.lastOperationTime
  editForm.updateTime = row.updateTime
}

let permissonData = []
const roleDetail = async (id: any) => {
  editForm.title = '角色权限-(尽查看)'
  permissonData = []
  let res = await rolePermissionList(id)
  console.log(res.data)
  permissonData = res.data
  // console.log(res)
  editDrawer.value = true

}
const perrmissonProps = {
  children: 'children',
  label: 'menuTitle',
}


// :data="perrmissonData"
</script>

<style>
.paginationClass {
  //display: flex;
  //margin: 10px auto;
  //justify-content: right;
  //bottom: 0;
  position: fixed;
  bottom: 0;
  height: 40px;
  width: 100%;
  text-align: center;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-tag {
  display: initial;
  margin-left: 0.2vh;
  cursor: pointer;
}
</style>